
<template>
  <div class="health-assessment">
    
    <h3>心理压力测评</h3>
   
    <div v-for="(question, index) in questions" :key="index" class="question">
      <p>{{ question.text }}</p>
      <div class="answer-options">
       
        <input
          type="radio"
          :value="2"
          v-model="answers[index]"
          @change="updateScore"
        />是
        <input
          type="radio"
          :value="1"
          v-model="answers[index]"
          @change="updateScore"
        />否
       
      </div>
    </div>
    <p>您的综合压力评分：{{ totalScore }}</p>
    <p>{{ assessmentResult }}</p>
  </div>
  
</template>

<script setup lang="ts">
import { ref } from "vue";
const questions=ref([

   {text:'工作压力大,经常加班熬夜'},
    {text:'经常三餐不规律？'},
    {text:'经常在睡前或深夜加餐'},
     {text:'隔夜菜不舍得浪费，热了还可以再吃？'},
     {text:'是否经常饮酒？'},
     {text:'经常空腹饮用可乐、咖啡或浓茶'},
     {text:'经常在睡前或深夜加餐'},
     {text:'情绪起伏波动大，容易精神紧张？心胸狭窄，容易生闷气'},
     {text:'是否有心血管疾病，并因此服药'},
     {text:'平时胃不舒服，扛不过去了？'},
     {text:'已有胃病史，症状时才吃药？'},
     {text:'您有抽烟的习惯吗'},
]);
const answers=ref([null,null,null]);
const totalScore=ref(0);
const assessmentResult=ref('');
const updateScore=()=>{
  totalScore.value=answers.value.reduce((acc,cur)=>acc+cur,0);
  if(totalScore.value<=10){
    assessmentResult.value='您的心理压力较小，请继续保持良好的生活习惯和心态。';
  }
  else if(totalScore.value>10&&totalScore.value<=20){
    assessmentResult.value='您的心理压力一般，建议您关注自己的情绪，适当调整生活和工作节奏，保持良好的心态。';
}
else{
 assessmentResult.value='您的心理压力较大，建议您寻求专业心理辅导，调整心态，保持良好的生活习惯。';
}
}

</script>

<style scoped lang="scss">

.quzi-container{
  width:100%;
 height: 800px;
 background: #f0f7ff;
 .top{
  width: 100%;
  height:100px;
 }
  .quiz{
    width: 85%;
    height: 500px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 10px;
    margin-left: 25px;
    box-shadow:10px;
    .question{
      width: 100%;
      height:80px;
      line-height: 80px;
      margin-left: 30px;
      font-size: 19px;
    }
    .options{
      width: 80%;
    }
  }
}
</style>